<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多元数据过渡</title>
    <link rel="stylesheet" href="./css/animation.css">
</head>

<body>
    <div id="app">
        <transition name="slide-left" enter-active-class="animated  zoomIn" leave-active-class="animated  zoomOut">
            <button v-if="show" @click="show=!show" class="ylc" key="ylca">叶良辰</button>
            <button v-else @click="show=!show" class="dzt" key="dzta">吊炸天</button>
            <p v-else>Sorry, no items found.</p>
        </transition>

        <hr>
        <button @click="username=!username">切换登录方式</button>
        <div v-if="username" id="us" key="abc">
            <label for="">用户名</label>
            <input type="text">
        </div>
        <div v-else id="em" key="bcd">
            <label for="">邮箱</label>
            <input type="text">
        </div>
        <hr>
        <transition name="slide-left" enter-active-class="animated  zoomIn" leave-active-class="animated  zoomOut">
            <button key="edit" v-if="isEditing">修改</button>
            <button key="save" v-else>保存</button>
            <p v-else>Sorry, no items found.</p>
        </transition>
        <hr>
        <transition 
            name="slide-left" 
            enter-active-class="animated  zoomIn" 
            leave-active-class="animated  zoomOut"
            mode="out-in"
        >
            <button :key="btnKey">{{isEditing ? '修改' : '保存'}}</button>
            <p v-else>Sorry, no items found.</p>
        </transition>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isEditing: true,
                show: true,
                username: true,
                
            },
            computed:{
                btnKey(){
                    return this.isEditing ? 'editkey' : 'savekey'
                }
            }
        })
    </script>
</body>

</html>